﻿var colorChanger; /* Combobox listing the rings displayed for customizing colors */

/**
 * Triggered function when the gadget is opened, loads the menu and a
 * default set of rings
 */
function onOpen() 
{ 
  setupDefaultRings();
  loadOptions();
  loadRings(DEF_NUM_RINGS, Rings);

  pluginHelper.onAddCustomMenuItems = onAddCustomMenuItems;
}


/**
 * Displays/redisplays the options for changing colors and adding/removing of rings.
 */
function loadOptions()
{
  colorChanger = view.appendElement("<combobox />");
  colorChanger.height = 100;
  colorChanger.width = 118;
  colorChanger.x = 6;
  colorChanger.y = 7;
  colorChanger.onkeypress = "onKeyPressColorChanger()";
  colorChanger.background = "#FFFFFF";
  colorChanger.itemHeight = 20;
  colorChanger.itemOverColor = "#CCFFCC";
  colorChanger.maxDroplistItems = 50;
  colorChanger.value = Rings[0].ringName;

  colorButton = view.appendElement("<button />");
  colorButton.height = 22;
  colorButton.width = 100;
  colorButton.x = 0;
  colorButton.y = 35;
  colorButton.onclick = "changeColors()";
  colorButton.downImage="stock_images/button_down.png";
  colorButton.image="stock_images/button_up.png";
  colorButton.overImage="stock_images/button_over.png";
  colorButton.caption = "Change Color";

  ringChangerButton = view.appendElement("<button />");
  ringChangerButton.height = 22;
  ringChangerButton.width = 81;
  ringChangerButton.x = view.width - (100);
  ringChangerButton.y = 6;
  ringChangerButton.onclick="addRemoveRings()";
  ringChangerButton.image="stock_images/button_up.png";
  ringChangerButton.overImage="stock_images/button_over.png";
  ringChangerButton.caption = "Change Rings";
}


/**
 * Fill in the itemlist for implementing the customization of each ring to change colours
 * @param ringType specifies the clock type to determine which folder to load new image from
 *
 */
function setupColorChanger(ringType)
{
  var comboboxItem = colorChanger.appendElement("<item />");
  var colorLabel = comboboxItem.appendElement("<label />");
    colorLabel.innerText = ringType;
}


/**
 * Handles the clock functionalities
 */
function onTimeout()
{
  updateClock();

  var currentTime = new Date();
  var seconds = currentTime.getSeconds(); /* 60 second format */
    
  /* Ensures a timeout of the marker positions every second */
  view.setTimeout("onTimeout();", seconds );
}

/**
 * Updates the marker positions appropriately
 */
function updateClock()
{
  var currentTime = new Date();

  for( var i=0; i<Rings.length; i++ )
  {
    if (Rings[i].ringName == RING_TYPE[0])
    {
      var year = currentTime.getYear();

      Rings[i].marker.innerText = year;
    }

    if (Rings[i].ringName == RING_TYPE[1])
    {
      var seconds = currentTime.getSeconds();
      var angle = (360 * seconds) / 60;

       Rings[i].marker.rotation = angle;
    }

    if (Rings[i].ringName == RING_TYPE[2])
    {
      var hours = currentTime.getHours();
      var angle = (360 * hours) / 24;

      Rings[i].marker.rotation = angle;
    }

     if (Rings[i].ringName == RING_TYPE[3])
    {
      var day = currentTime.getDay();
      var angle = (360 * day) / 7;

     Rings[i].marker.rotation = angle;
    }

     if (Rings[i].ringName == RING_TYPE[4])
    {
      var months = currentTime.getMonth(); 
      var angle = (360 * months) / 12;
       
      Rings[i].marker.rotation = angle;
    }

    if (Rings[i].ringName == RING_TYPE[5])
    {
      var hours = currentTime.getHours();
      var angle = (360 * hours) / 24;

       Rings[i].marker.rotation = angle;
    }
  }
}

/**
 * Event handler for ring color changing and adding/removing of rings
 */
function onOptionChanged()
{
  var optionChanged = event.propertyName;

  /* Color customization of rings */
  if (optionChanged == "OkChangeColor")
  {
    if (options.getValue("OkChangeColor") == true)
    {
      var choice = colorChanger.value;
       
      var choiceNum;
  
      for( var i=0; i<Rings.length; i++ )
      {
        if (choice == Rings[i].ringName)
          choiceNum = i;
      }

      choice = mergeString(choice);

      var stringOption;
      for (var i=0; i<COLOR.length; i++)
      {
        stringOption = "option" + i;
 
        if (options.getValue(stringOption))
        {
          Rings[choiceNum].ringImg.src = "images/ring/" + choice + "/" + COLOR[i] + ".png";
          if (choice != "YearlyRing")
            Rings[choiceNum].marker.src = "images/marker/" + COLOR[i] + "Opposite.png";
        }
      }
    }
  }

  /* Adding/removing rings */
  if (optionChanged == "OkChangeRings")
  {
    if (options.getValue("OkChangeRings") == true)
    {
      var numRings = 0;   
      Rings = new Array();

      var stringCheckbox;

      for (var i = RING_TYPE.length - 1; i>=0; i--)
      {
        stringCheckbox = "checkbox" + i;
        if (options.getValue(stringCheckbox) == true)
        {
          Rings.push(new Ring(RING_TYPE[i], null, null));
          numRings++;
        }   
      }
    
      /* load new selection of rings */
      loadRings(numRings);
    }
  }  
}

/**
 * Enter key is pressed for the color changer
 */
function onKeyPressColorChanger()
{
  if (event.keycode == 13) 
  {
    changeColors();
    return false;
  }
}


/**
 * Opens the options menu and shows the options to change colors
 * and hides the option to add/remove rings
 */
function changeColors()
{
  options.putValue(OPTION_NAMES.DIALOG_TYPE, 'change_ring_design');
  pluginHelper.showOptionsDialog();
}

/**
 * Opens the options menu and shows the options to add/remove rings
 * and hides the option to change colors
 */
function addRemoveRings()
{
  options.putValue(OPTION_NAMES.DIALOG_TYPE, 'add/remove_rings');
  pluginHelper.showOptionsDialog();
} 